<template>
    <div class="app-container">
        <!-- nav -->
        <el-menu default-active="2" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1" @click="this.$router.push('/')">首页</el-menu-item>
            <el-menu-item index="2">商品</el-menu-item>
            <el-menu-item index="3" @click="this.$router.push('/orderer')">订单</el-menu-item>
        </el-menu>

        <el-card class="filter-container" shadow="never" style="margin-top:40px">
            <div>
                <i class="el-icon-search"></i>
                <span>搜索商品</span>
                <el-button style="float: right;margin-top:39px" type="primary" size="small" @click="this.searchGoods">
                    查询结果
                </el-button>
                <el-button style="float: right;margin-right: 15px;margin-top:39px" size="small"
                    @click="this.listQuery.keyword = ''">
                    重置
                </el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                    <el-form-item label="输入搜索：">
                        <el-input style="width: 203px" v-model="listQuery.keyword" placeholder="商品名称"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>

        <el-card class="operate-container" shadow="never" style="margin-top: 40px;">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
            <el-button class="btn-add" size="mini" @click="this.$router.push('/goods/AddGoods')"
                style="margin-left: 550px;">
                添加
            </el-button>
        </el-card>

        <!-- 商品列表 -->
        <div class="table-container" style="margin-top: 10px;">
            <el-table ref="productTable" :data="pageList" style="width: 100%" border>
                <el-table-column type="selection" width="60" align="center"></el-table-column>
                <el-table-column label="编号" width="60" align="center">
                    <template v-slot:default="scope">
                        <p>{{ scope.row.id }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="商品图片" width="120" align="center">
                    <template v-slot:default="scope">
                        <img style="height: 80px" :src="scope.row.pic"></template>
                </el-table-column>
                <el-table-column label="商品名称" align="center">
                    <template v-slot:default="scope">
                        <p>{{ scope.row.name }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="价格" width="60" align="center">
                    <template v-slot:default="scope">
                        <p>{{ scope.row.price }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="库存" width="70" align="center">
                    <template v-slot:default="scope">
                        <p>{{ scope.row.stock }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="100" align="center">
                    <template v-slot:default="scope">
                        <p>{{ scope.row.status }}</p>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="160" align="center">
                    <template v-slot:default="scope">
                        <p>
                            <el-button size="mini"
                                @click="this.$router.push(`/goods/EditGoods/${scope.row.id}`)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="this.deleteGoods(scope.row.id)">删除
                            </el-button>
                        </p>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container" style="margin-left: 110px; margin-top: 10px; text-align: center;">
            <el-pagination background @current-change="changeList" layout="total, prev, pager, next, jumper"
                :page-size="listQuery.pageSize" :current-page.sync="listQuery.pageNum" :total="total"
                style="display: inline-block;">
            </el-pagination>
        </div>

    </div>
</template>
  
<script>
import { SearchGoods, GetSupplierGoods, DeleteSupplierGoods } from '../../../wailsjs/go/pkg/User'

export default {
    name: 'index',
    data() {
        return {
            total: 0,
            logout: false,
            listQuery: {
                pageSize: 5,
                pageNum: 1,
                totalPage: 0,
                keyword: '',
                pageList: []
            }, //查询的关键词
            list: [], //商品列表
            editSkuInfo: {
                dialogVisible: false,
                productId: null,
                productSn: '',
                productAttributeCategoryId: null,
                stockList: [],
                productAttr: [],
                keyword: null
            },
        }
    },

    methods: {
        //退出登陆
        Logout() {
            //删除已经登陆的token和email
            Auth.delFrontAuth()
            //切换路由到login
            this.$router.push("/login")
        },
        searchGoods() {
            //首先搜索的关键词不能为空
            if (this.listQuery.keyword.length == 0) {
                this.$notify.info({
                    title: '系统信息',
                    message: '搜索关键词不能为空',
                })
            } else {
                SearchGoods(localStorage.getItem("supplier_email"), this.listQuery.keyword, localStorage.getItem("supplier_token")).then((rep) => {
                    if (rep.code == 401) {
                        this.$router.push("/login")
                    }
                    if (rep.code == 200) {
                        this.list = rep.data
                        //获取总共商品数量
                        this.total = rep.data.length
                        //对商品进行分页 每页5个查看有多少页面数
                        this.listQuery.totalPage = Math.ceil(this.total / this.listQuery.pageSize)
                        //然后获取该页面的商品列表
                        this.pageList = this.list.slice((this.listQuery.pageNum - 1) * this.listQuery.pageSize, this.listQuery.pageNum * this.listQuery.pageSize)
                    }
                }).catch((rep) => {
                    console.log(rep);
                })
            }
        },
        //获取商品列表
        suppliseGoods() {
            GetSupplierGoods(localStorage.getItem("supplier_email"), localStorage.getItem("supplier_token")).then((rep) => {
                if (rep.code == 401) {
                    this.$router.push("/login")
                }

                console.log(rep);

                if (rep.code == 200) {
                    this.list = rep.data
                    //获取总共商品数量
                    this.total = rep.data.length
                    //对商品进行分页 每页5个查看有多少页面数
                    this.listQuery.totalPage = Math.ceil(this.total / this.listQuery.pageSize)
                    //然后获取该页面的商品列表
                    this.pageList = this.list.slice((this.listQuery.pageNum - 1) * this.listQuery.pageSize, this.listQuery.pageNum * this.listQuery.pageSize)

                }
            }).catch((rep) => {
                console.log(rep);
            })
        },
        deleteGoods(id) {
            DeleteSupplierGoods(localStorage.getItem("supplier_email"), id.toString(), localStorage.getItem("supplier_token")).then((rep) => {
                console.log(rep);
                if (rep.code == 401) {
                    this.$router.push("/login")
                }
                if (rep.code == 200) {
                    this.$message({
                        message: '成功删除商品',
                        type: 'success'
                    });
                }
            }).catch((rep) => {
                console.log(rep);
            })
        },
        //改变页码
        changeList(newPageNum) {
            // 更新当前页面编号
            this.listQuery.pageNum = newPageNum;
            // 使用新的页面编号来获取新的页面列表
            this.pageList = this.list.slice((this.listQuery.pageNum - 1) * this.listQuery.pageSize, this.listQuery.pageNum * this.listQuery.pageSize);
        },
    },
    mounted() {
        this.suppliseGoods()
    },
}
</script>
  
<style scoped>
.app-container {
    margin-top: 40px;
    margin-left: 120px;
    margin-right: 120px;
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.total-layout {
    margin-top: 40px;
    cursor: pointer;
}

.total-frame {
    border: 1px solid #DCDFE6;
    padding: 20px;
    height: 100px;
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.total-icon {
    color: #409EFF;
    width: 60px;
    height: 60px;
}

.total-title {
    text-align: center;
}

.total-value {
    text-align: center;
}

.un-handle-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
}

.layout-title {
    color: #606266;
    padding: 15px 20px;
    background: #F2F6FC;
    font-weight: bold;
}

.un-handle-content {
    padding: 20px 40px;
}

.un-handle-item {
    border-bottom: 1px solid #EBEEF5;
    padding: 10px;
}

.overview-layout {
    margin-top: 20px;
}

.overview-item-value {
    font-size: 24px;
    text-align: center;
}

.overview-item-title {
    margin-top: 10px;
    text-align: center;
}

.out-border {
    border: 1px solid #DCDFE6;
}

.statistics-layout {
    margin-top: 20px;
    border: 1px solid #DCDFE6;
}

.mine-layout {
    position: absolute;
    right: 140px;
    top: 107px;
    width: 250px;
    height: 235px;
}

.address-content {
    padding: 20px;
    font-size: 18px
}

.pagination-container {
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}
</style>